<template>
  <view class="patrol-behavior-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">巡检行为监督</view>
    </view>

    <!-- 功能选项卡 -->
    <view class="function-tabs">
      <view 
        v-for="(tab, index) in functionTabs" 
        :key="index"
        class="tab-item"
        :class="{ active: activeTab === index }"
        @click="switchTab(index)"
      >
        <image :src="tab.icon" class="tab-icon" />
        <text class="tab-text">{{ tab.name }}</text>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <!-- 日期选择 -->
      <view class="filter-row">
        <view class="filter-item">
          <view class="filter-label">日期</view>
          <picker mode="date" :value="selectedDate" @change="onDateChange">
            <view class="picker-display">
              <text>{{ formatDate(selectedDate) }}</text>
              <image src="/static/icons/arrow-down.svg" class="arrow-icon" />
            </view>
          </picker>
        </view>
        
        <!-- 人员选择 -->
        <view class="filter-item" v-if="activeTab === 0">
          <view class="filter-label">巡检员</view>
          <picker mode="selector" :range="inspectorOptions" :value="selectedInspectorIndex" @change="onInspectorChange">
            <view class="picker-display">
              <text>{{ selectedInspector || '请选择巡检员' }}</text>
              <image src="/static/icons/arrow-down.svg" class="arrow-icon" />
            </view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 在岗巡检轨迹 -->
    <view v-if="activeTab === 0" class="track-section">
      <view class="section-title">
        <image src="/static/icons/map-pin.svg" class="title-icon" />
        <text>巡检轨迹</text>
      </view>
      
      <!-- 轨迹统计 -->
      <view class="track-stats">
        <view class="stat-item">
          <view class="stat-value">{{ trackData.totalDistance }}km</view>
          <view class="stat-label">总里程</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ trackData.totalTime }}h</view>
          <view class="stat-label">巡检时长</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ trackData.visitedPoints }}</view>
          <view class="stat-label">巡检点位</view>
        </view>
      </view>

      <!-- 轨迹地图区域 -->
      <view class="map-container">
        <map 
          id="trackMap"
          class="track-map"
          :longitude="mapCenter.longitude"
          :latitude="mapCenter.latitude"
          :scale="mapScale"
          :markers="mapMarkers"
          :polyline="mapPolylines"
          :show-location="true"
          :enable-3D="false"
          :enable-overlooking="false"
          :enable-zoom="true"
          :enable-scroll="true"
          :enable-rotate="false"
          @markertap="onMarkerTap"
          @regionchange="onRegionChange"
        >
          <!-- 地图控制按钮 -->
          <cover-view class="map-controls">
            <cover-view class="control-btn" @tap="centerToCurrentLocation">
              <cover-image src="/static/icons/location.svg" class="control-icon" />
            </cover-view>
            <cover-view class="control-btn" @tap="toggleTrackMode">
              <cover-image :src="trackMode ? '/static/icons/pause.svg' : '/static/icons/play.svg'" class="control-icon" />
            </cover-view>
          </cover-view>
          
          <!-- 地图图例 -->
          <cover-view class="map-legend">
            <cover-view class="legend-item">
              <cover-view class="legend-dot start-point"></cover-view>
              <cover-text class="legend-text">起点</cover-text>
            </cover-view>
            <cover-view class="legend-item">
              <cover-view class="legend-dot end-point"></cover-view>
              <cover-text class="legend-text">终点</cover-text>
            </cover-view>
            <cover-view class="legend-item">
              <cover-view class="legend-dot check-point"></cover-view>
              <cover-text class="legend-text">巡检点</cover-text>
            </cover-view>
          </cover-view>
        </map>
      </view>

      <!-- 轨迹记录列表 -->
      <view class="track-records">
        <view class="records-title">轨迹记录</view>
        <view 
          v-for="(record, index) in trackRecords" 
          :key="index"
          class="record-item"
        >
          <view class="record-time">{{ record.time }}</view>
          <view class="record-location">{{ record.location }}</view>
          <view class="record-action">{{ record.action }}</view>
        </view>
      </view>
    </view>

    <!-- 取证清单 -->
    <view v-if="activeTab === 1" class="evidence-section">
      <view class="section-title">
        <image src="/static/icons/camera.svg" class="title-icon" />
        <text>取证清单</text>
      </view>

      <!-- 取证统计 -->
      <view class="evidence-stats">
        <view class="stat-card">
          <view class="card-value">{{ evidenceStats.totalCount }}</view>
          <view class="card-label">总取证数</view>
        </view>
        <view class="stat-card">
          <view class="card-value">{{ evidenceStats.photoCount }}</view>
          <view class="card-label">照片数量</view>
        </view>
        <view class="stat-card">
          <view class="card-value">{{ evidenceStats.videoCount }}</view>
          <view class="card-label">视频数量</view>
        </view>
      </view>

      <!-- 取证列表 -->
      <view class="evidence-list">
        <view 
          v-for="(evidence, index) in evidenceList" 
          :key="index"
          class="evidence-item"
        >
          <view class="evidence-header">
            <view class="evidence-info">
              <view class="evidence-type">{{ evidence.type }}</view>
              <view class="evidence-time">{{ evidence.time }}</view>
            </view>
            <view class="evidence-status" :class="`status-${evidence.status}`">
              {{ evidence.statusText }}
            </view>
          </view>
          <view class="evidence-content">
            <view class="evidence-location">
              <image src="/static/icons/map-pin.svg" class="location-icon" />
              <text>{{ evidence.location }}</text>
            </view>
            <view class="evidence-description">{{ evidence.description }}</view>
          </view>
          <view class="evidence-media">
            <view class="media-count">
              <text>照片: {{ evidence.photoCount }}张</text>
              <text>视频: {{ evidence.videoCount }}个</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 取证统计 -->
    <view v-if="activeTab === 2" class="statistics-section">
      <view class="section-title">
        <image src="/static/icons/chart.svg" class="title-icon" />
        <text>取证统计</text>
      </view>

      <!-- 统计概览 -->
      <view class="stats-overview">
        <view class="overview-card">
          <view class="card-header">
            <text class="card-title">今日取证</text>
          </view>
          <view class="card-content">
            <view class="main-stat">
              <text class="stat-number">{{ todayStats.totalEvidence }}</text>
              <text class="stat-unit">件</text>
            </view>
            <view class="sub-stats">
              <view class="sub-stat">
                <text class="sub-label">照片</text>
                <text class="sub-value">{{ todayStats.photos }}</text>
              </view>
              <view class="sub-stat">
                <text class="sub-label">视频</text>
                <text class="sub-value">{{ todayStats.videos }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="overview-card">
          <view class="card-header">
            <text class="card-title">本月取证</text>
          </view>
          <view class="card-content">
            <view class="main-stat">
              <text class="stat-number">{{ monthStats.totalEvidence }}</text>
              <text class="stat-unit">件</text>
            </view>
            <view class="sub-stats">
              <view class="sub-stat">
                <text class="sub-label">照片</text>
                <text class="sub-value">{{ monthStats.photos }}</text>
              </view>
              <view class="sub-stat">
                <text class="sub-label">视频</text>
                <text class="sub-value">{{ monthStats.videos }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 统计图表 -->
      <view class="chart-container">
        <view class="chart-header">
          <view class="chart-title">取证趋势</view>
          <view class="chart-actions">
            <button class="action-btn" @tap="refreshChart">刷新</button>
          </view>
        </view>
        <view class="chart-content">
          <qiun-data-charts 
            type="line" 
            :chartData="trendChartData" 
            :opts="chartOpts"
            :canvas2d="true"
            :animation="true"
            background="#ffffff"
            style="width: 100%; height: 300px;"
          />
        </view>
      </view>

      <!-- 分类统计 -->
      <view class="category-stats">
        <view class="category-title">分类统计</view>
        <view 
          v-for="(category, index) in categoryStats" 
          :key="index"
          class="category-item"
        >
          <view class="category-info">
            <view class="category-name">{{ category.name }}</view>
            <view class="category-count">{{ category.count }}件</view>
          </view>
          <view class="category-progress">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: category.percentage + '%' }"></view>
            </view>
            <text class="progress-text">{{ category.percentage }}%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="isEmpty" class="empty-state">
      <image src="/static/icons/inbox.svg" class="empty-icon" />
      <text class="empty-text">暂无数据</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'

// 响应式数据
const activeTab = ref(0)
const selectedDate = ref(new Date().toISOString().split('T')[0])
const selectedInspectorIndex = ref(0)
const loading = ref(false)
const trackMode = ref(false)

// 地图相关数据
const mapCenter = ref({
  longitude: 116.397428,
  latitude: 39.90923
})
const mapScale = ref(16)
const mapMarkers = ref([])
const mapPolylines = ref([])

// 功能选项卡
const functionTabs = ref([
  { name: '在岗巡检轨迹', icon: '/static/icons/map-pin.svg' },
  { name: '取证清单', icon: '/static/icons/camera.svg' },
  { name: '取证统计', icon: '/static/icons/chart.svg' }
])

// 巡检员选项
const inspectorOptions = ref([
  '全部巡检员',
  '张三',
  '李四',
  '王五',
  '赵六'
])

// 轨迹数据
const trackData = ref({
  totalDistance: 12.5,
  totalTime: 6.5,
  visitedPoints: 28
})

// 轨迹记录
const trackRecords = ref([
  {
    time: '09:00',
    location: '停车场A区',
    action: '开始巡检'
  },
  {
    time: '09:15',
    location: '停车场B区',
    action: '违停取证'
  },
  {
    time: '09:30',
    location: '停车场C区',
    action: '设备检查'
  },
  {
    time: '09:45',
    location: '停车场D区',
    action: '正常巡检'
  }
])

// 取证统计
const evidenceStats = ref({
  totalCount: 45,
  photoCount: 38,
  videoCount: 7
})

// 取证列表
const evidenceList = ref([
  {
    type: '违停取证',
    time: '2024-01-15 09:15',
    location: '停车场A区-A001',
    description: '车辆违规停放在消防通道',
    photoCount: 3,
    videoCount: 1,
    status: 'completed',
    statusText: '已完成'
  },
  {
    type: '设备异常',
    time: '2024-01-15 10:30',
    location: '停车场B区-收费设备',
    description: '收费设备显示屏故障',
    photoCount: 2,
    videoCount: 0,
    status: 'pending',
    statusText: '处理中'
  },
  {
    type: '环境取证',
    time: '2024-01-15 11:45',
    location: '停车场C区-垃圾桶',
    description: '垃圾桶满溢需要清理',
    photoCount: 1,
    videoCount: 0,
    status: 'completed',
    statusText: '已完成'
  }
])

// 今日统计
const todayStats = ref({
  totalEvidence: 12,
  photos: 8,
  videos: 4
})

// 本月统计
const monthStats = ref({
  totalEvidence: 156,
  photos: 128,
  videos: 28
})

// 分类统计
const categoryStats = ref([
  { name: '违停取证', count: 28, percentage: 45 },
  { name: '设备异常', count: 18, percentage: 29 },
  { name: '环境取证', count: 10, percentage: 16 },
  { name: '其他', count: 6, percentage: 10 }
])

// 图表数据
const trendChartData = ref({
  categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
  series: [{
    name: '取证数量',
    data: [45, 52, 38, 65, 48, 72, 58]
  }, {
    name: '完成率',
    data: [85, 88, 82, 92, 86, 95, 89]
  }]
})

// 图表配置
const chartOpts = ref({
  color: ['#1890ff', '#52c41a'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: true,
    position: 'bottom',
    float: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: 'rgba(0,0,0,0)',
    fontSize: 13,
    fontColor: '#666666',
    lineHeight: 11,
    itemGap: 10,
    margin: 0
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    data: [{
      position: 'left',
      min: 0,
      fontColor: '#666666',
      fontSize: 13,
      format: (val) => { return val.toFixed(0) }
    }]
  },
  xAxis: {
    disableGrid: true,
    fontColor: '#666666',
    fontSize: 13,
    lineHeight: 11
  },
  extra: {
    line: {
      type: 'curve',
      width: 2,
      activeType: 'hollow'
    }
  }
})

// 计算属性
const selectedInspector = computed(() => {
  return inspectorOptions.value[selectedInspectorIndex.value]
})

const isEmpty = computed(() => {
  if (activeTab.value === 0) {
    return trackRecords.value.length === 0
  } else if (activeTab.value === 1) {
    return evidenceList.value.length === 0
  } else {
    return categoryStats.value.length === 0
  }
})

// 方法
const switchTab = (index) => {
  activeTab.value = index
  loadData()
}

const onDateChange = (e) => {
  selectedDate.value = e.detail.value
  loadData()
}

const onInspectorChange = (e) => {
  selectedInspectorIndex.value = e.detail.value
  loadData()
}

const formatDate = (date) => {
  if (!date) return '请选择日期'
  const d = new Date(date)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

// 刷新图表数据
const refreshChart = () => {
  // 模拟刷新图表数据
  const newData = {
    categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
    series: [{
      name: '取证数量',
      data: Array.from({length: 7}, () => Math.floor(Math.random() * 50) + 30)
    }, {
      name: '完成率',
      data: Array.from({length: 7}, () => Math.floor(Math.random() * 20) + 80)
    }]
  }
  trendChartData.value = newData
  uni.showToast({
    title: '图表已刷新',
    icon: 'success'
  })
}

const loadData = async () => {
  loading.value = true
  try {
    // 模拟数据加载
    await new Promise(resolve => setTimeout(resolve, 500))
    // 这里可以根据activeTab、selectedDate、selectedInspector等参数加载不同的数据
    
    // 如果是轨迹页面，加载地图数据
    if (activeTab.value === 0) {
      loadMapData()
    }
  } catch (error) {
    console.error('加载数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 地图相关方法
const loadMapData = () => {
  // 模拟轨迹数据
  const trackPoints = [
    { longitude: 116.397428, latitude: 39.90923, time: '09:00', location: '停车场A区', action: '开始巡检' },
    { longitude: 116.398428, latitude: 39.91023, time: '09:15', location: '停车场B区', action: '违停取证' },
    { longitude: 116.399428, latitude: 39.91123, time: '09:30', location: '停车场C区', action: '设备检查' },
    { longitude: 116.400428, latitude: 39.91223, time: '09:45', location: '停车场D区', action: '正常巡检' }
  ]
  
  // 设置地图标记点
  mapMarkers.value = trackPoints.map((point, index) => ({
    id: index,
    longitude: point.longitude,
    latitude: point.latitude,
    iconPath: index === 0 ? '/static/icons/map-start.svg' : 
              index === trackPoints.length - 1 ? '/static/icons/map-end.svg' : 
              '/static/icons/map-check.svg',
    width: 30,
    height: 30,
    callout: {
      content: `${point.time} ${point.location}`,
      color: '#333',
      fontSize: 12,
      borderRadius: 4,
      bgColor: '#fff',
      padding: 8,
      display: 'BYCLICK'
    }
  }))
  
  // 设置轨迹线
  mapPolylines.value = [{
    points: trackPoints.map(point => ({
      longitude: point.longitude,
      latitude: point.latitude
    })),
    color: '#1890ff',
    width: 4,
    dottedLine: false,
    arrowLine: true,
    borderColor: '#fff',
    borderWidth: 2
  }]
  
  // 设置地图中心点为轨迹中心
  if (trackPoints.length > 0) {
    const centerLng = trackPoints.reduce((sum, point) => sum + point.longitude, 0) / trackPoints.length
    const centerLat = trackPoints.reduce((sum, point) => sum + point.latitude, 0) / trackPoints.length
    mapCenter.value = {
      longitude: centerLng,
      latitude: centerLat
    }
  }
}

const onMarkerTap = (e) => {
  console.log('标记点击:', e)
}

const onRegionChange = (e) => {
  if (e.type === 'end') {
    mapCenter.value = {
      longitude: e.detail.centerLocation.longitude,
      latitude: e.detail.centerLocation.latitude
    }
  }
}

const centerToCurrentLocation = () => {
  // 获取当前位置并居中
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      mapCenter.value = {
        longitude: res.longitude,
        latitude: res.latitude
      }
    },
    fail: (err) => {
      console.error('获取位置失败:', err)
      uni.showToast({
        title: '获取位置失败',
        icon: 'none'
      })
    }
  })
}

const toggleTrackMode = () => {
  trackMode.value = !trackMode.value
  uni.showToast({
    title: trackMode.value ? '开始实时追踪' : '停止实时追踪',
    icon: 'none'
  })
}

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.patrol-behavior-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-header {
  background-color: #fff;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #e9ecef;
  
  .header-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
  }
}

.function-tabs {
  display: flex;
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 10rpx;
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 10rpx;
    border-radius: 12rpx;
    transition: all 0.3s;
    
    &.active {
      background-color: #1890ff;
      
      .tab-icon {
        filter: brightness(0) invert(1);
      }
      
      .tab-text {
        color: #fff;
      }
    }
    
    .tab-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
    }
    
    .tab-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.filter-section {
  background-color: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .filter-row {
    display: flex;
    gap: 30rpx;
    
    .filter-item {
      flex: 1;
      
      .filter-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .picker-display {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;
        background-color: #f8f9fa;
        border-radius: 8rpx;
        border: 1rpx solid #e9ecef;
        
        text {
          font-size: 28rpx;
          color: #333;
        }
        
        .arrow-icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
}

.track-section, .evidence-section, .statistics-section {
  margin: 0 20rpx 20rpx;
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .title-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
    
    text {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
}

.track-stats {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .stat-item {
    flex: 1;
    text-align: center;
    
    .stat-value {
      font-size: 36rpx;
      font-weight: 600;
      color: #1890ff;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .stat-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.map-container {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  height: 400rpx;
  position: relative;
  overflow: hidden;
  
  .track-map {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }
  
  .map-controls {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    
    .control-btn {
      width: 60rpx;
      height: 60rpx;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      .control-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  
  .map-legend {
    position: absolute;
    bottom: 20rpx;
    left: 20rpx;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8rpx;
    padding: 16rpx;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8rpx;
      
      .legend-dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        
        &.start-point {
          background-color: #52c41a;
        }
        
        &.end-point {
          background-color: #f5222d;
        }
        
        &.check-point {
          background-color: #1890ff;
        }
      }
      
      .legend-text {
        font-size: 20rpx;
        color: #666;
      }
    }
  }
}

.track-records {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .records-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .record-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-time {
      width: 120rpx;
      font-size: 24rpx;
      color: #666;
    }
    
    .record-location {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      margin: 0 20rpx;
    }
    
    .record-action {
      font-size: 24rpx;
      color: #1890ff;
    }
  }
}

.evidence-stats {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
  
  .stat-card {
    flex: 1;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    text-align: center;
    
    .card-value {
      font-size: 36rpx;
      font-weight: 600;
      color: #1890ff;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .card-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.evidence-list {
  .evidence-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .evidence-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      .evidence-info {
        .evidence-type {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .evidence-time {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .evidence-status {
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        
        &.status-completed {
          background-color: #f6ffed;
          color: #52c41a;
          border: 1rpx solid #b7eb8f;
        }
        
        &.status-pending {
          background-color: #fff7e6;
          color: #fa8c16;
          border: 1rpx solid #ffd591;
        }
      }
    }
    
    .evidence-content {
      margin-bottom: 20rpx;
      
      .evidence-location {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        
        .location-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
        
        text {
          font-size: 26rpx;
          color: #666;
        }
      }
      
      .evidence-description {
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
      }
    }
    
    .evidence-media {
      .media-count {
        display: flex;
        gap: 30rpx;
        
        text {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
}

.stats-overview {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .overview-card {
    flex: 1;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    
    .card-header {
      margin-bottom: 20rpx;
      
      .card-title {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .card-content {
      .main-stat {
        display: flex;
        align-items: baseline;
        margin-bottom: 20rpx;
        
        .stat-number {
          font-size: 48rpx;
          font-weight: 600;
          color: #1890ff;
        }
        
        .stat-unit {
          font-size: 24rpx;
          color: #666;
          margin-left: 8rpx;
        }
      }
      
      .sub-stats {
        display: flex;
        gap: 30rpx;
        
        .sub-stat {
          .sub-label {
            font-size: 24rpx;
            color: #999;
            display: block;
            margin-bottom: 4rpx;
          }
          
          .sub-value {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
          }
        }
      }
    }
  }
}

.chart-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .chart-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
    
    .chart-actions {
      .action-btn {
        background-color: #1890ff;
        color: #fff;
        border: none;
        border-radius: 8rpx;
        padding: 12rpx 24rpx;
        font-size: 24rpx;
        line-height: 1;
        
        &:active {
          background-color: #096dd9;
        }
      }
    }
  }
  
  .chart-content {
    border-radius: 8rpx;
    overflow: hidden;
  }
}

.category-stats {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .category-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .category-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .category-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;
      
      .category-name {
        font-size: 28rpx;
        color: #333;
      }
      
      .category-count {
        font-size: 28rpx;
        font-weight: 600;
        color: #1890ff;
      }
    }
    
    .category-progress {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .progress-bar {
        flex: 1;
        height: 8rpx;
        background-color: #f0f0f0;
        border-radius: 4rpx;
        overflow: hidden;
        
        .progress-fill {
          height: 100%;
          background-color: #1890ff;
          transition: width 0.3s;
        }
      }
      
      .progress-text {
        font-size: 24rpx;
        color: #666;
        width: 60rpx;
        text-align: right;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  
  .empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.3;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx;
  
  text {
    font-size: 28rpx;
    color: #666;
  }
}
</style>